import { getFileIdb, getFileIdbWithDownloadUrl } from "@/pages/BCViz_new/utils";
import { Tooltip, ListItem, ListItemButton, Link, createTheme } from "@mui/material";
// import { makeStyles } from '@mui/styles';

import { useRafState } from "ahooks";
import { type CSSProperties, type MouseEventHandler } from "react";
import type { fetchDataReturn } from "../../FileUploadSimple";
import FileInfo from "../../FileInfo";
import { tooltipClasses } from '@mui/material/Tooltip';
import style from './_index.module.scss';

export default function ExampleSingle ({ filename: txt,
  onClick
}: {
  readonly filename: string;
  readonly onClick: MouseEventHandler<HTMLDivElement>;
}) {
  const [fileInfo, setFileInfo] = useRafState<fetchDataReturn>();
  const theme = createTheme();
  return (
    <Tooltip arrow
      title={fileInfo ? <FileInfo fileInfo={fileInfo.fileInfo} /> : undefined}
      key={txt}
      placement="right"
      onOpen={(e) => {
        getFileIdbWithDownloadUrl(txt).then((res) => {
          setFileInfo(res);
        });
      }}
      classes={{
        'tooltip': style['Tooltip'] ?? ''
      }}
    // style={{ '--boxShadow': theme.shadows[24] } as CSSProperties}
    // sx={
    //   {
    //     [`& .${tooltipClasses.tooltip}`]: {
    //       transform: 'scale(2)',
    //     }
    //   }
    // }
    // className={style['Tooltip'] ?? ''}
    >
      <ListItem disablePadding>
        <ListItemButton
          onClick={onClick}
          key={txt}

        >
          {/* <Button
                size='large'
                // variant="contained"
              > */}
          <Link component="button" underline="hover">
            {/* Example {ind + 1} */}
            {txt}
          </Link>
          {/* </Button> */}
        </ListItemButton>
      </ListItem>

    </Tooltip>
  );
}